<template>
    <div>
        <el-card style="">
            <div>
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                  <el-form-item label="公司名称">
                    <el-input v-model="companyInfo.companyName" />
                  </el-form-item>
                  <el-form-item label="官网标题">
                    <el-input v-model="companyInfo.companyTitle" />
                  </el-form-item>
                  <el-form-item label="系统外链名称">
                    <el-input v-model="companyInfo.linkName" />
                  </el-form-item>
                  <el-form-item label="系统跳转链接">
                    <el-input v-model="companyInfo.linkAddressUrl" />
                  </el-form-item>
                  <el-form-item label="官网备案信息">
                    <el-input v-model="companyInfo.recordInformation" />
                  </el-form-item>
                  <el-form-item label="备案信息链接">
                    <el-input v-model="companyInfo.recordInformationUrl" />
                  </el-form-item>
                  <el-form-item label="详细地址">
                    <el-input v-model="companyInfo.companyAddress" />
                  </el-form-item>
                  <el-form-item label="联系方式1">
                    <el-input v-model="companyInfo.contactWayOne" />
                  </el-form-item>
                  <el-form-item label="联系方式2">
                    <el-input v-model="companyInfo.contactWayTwo" />
                  </el-form-item>
                  <el-form-item label="电子邮箱">
                    <el-input v-model="companyInfo.email" />
                  </el-form-item>
                </el-form>
          <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              公司LOGO
            </div>
            <div>
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL_dev+'/common/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="companyInfo.companyLogUrl" :src="baseURL_dev+companyInfo.companyLogUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
            <!-- <el-input v-model="addForm.signText" style="width: 240px;border-radius: 0" placeholder=""></el-input> -->
          </div>
          <div style="margin-left: 30px;display: flex;margin-top: 20px">
            <div style="margin-right: 10px;font-size: 14px;width: 80px;">
              公司介绍
            </div>
            <div style="border: 1px solid #ccc;flex: 1;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="addorRef"
                mode="default"
              />
              <Editor
                style="height: 300px; overflow-y: hidden;"
                v-model="companyInfo.companyIntroduce"
                :defaultConfig="addorConfig"
                mode="default"
                @onCreated="handleCreated1"
              />
            </div>
          </div>
          <div style="margin-left: 120px;margin-top: 20px;">
            <el-button type="primary" @click="submit">修改</el-button>
          </div>
        </div>
        </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { baseURL_dev } from '../../config/baseUrl'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { ElMessage } from 'element-plus'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $CompanyInfo,$CompanyEdit } from '../../api/base'

    const companyInfo = ref({})
    const form = ref({})

    onMounted(()=>{
      loadList()
    })

    const loadList = async ()=>{
      // console.log(form.value)
      let ret = await $CompanyInfo()
      console.log('ret',ret)
      // companyInfo.value.companyName = ret.companyName
      // companyInfo.value.companyTitle = ret.companyTitle
      // companyInfo.value.linkAddressUrl = ret.linkAddressUrl
      // companyInfo.value.linkName = ret.linkName
      // companyInfo.value.recordInformation = ret.recordInformation
      // companyInfo.value.contactWayOne = ret.contactWayOne
      // companyInfo.value.contactWayTwo = ret.contactWayTwo
      // companyInfo.value.email = ret.email
      // companyInfo.value.companyLogUrl = ret.companyLogUrl

      companyInfo.value = ret.rows

      console.log('companyInfo',companyInfo.value)
      // companyInfo.value = ret.rows
    }

    // const handleAvatarSuccess: UploadProps['onSuccess'] = (
    //   response,
    //   uploadFile
    // ) => {
    //   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    // }
    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      console.log('response',response)
      console.log('uploadFile',uploadFile)
      companyInfo.value.companyLogUrl = response.fileName
      // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    }

    const submit = async ()=>{
      let ret = await $CompanyEdit(companyInfo.value)
      console.log('ret',ret)
      
    }

    const addorRef = shallowRef()
    const addorConfig = { placeholder: '请输入内容...' }
    const handleCreated1 = (editor) => {
      addorRef.value = editor // 记录 editor 实例，重要！
    }

    const editorRef = shallowRef()
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated2 = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  </style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>